<template>
  <div>
    <!-- 查询 -->
    <searchView @searches="searches" ref="searches" />
    <!-- 列表 -->
    <temlist
      ref="temlist"
      :data="datas"
      :total="pag.total"
      :loading="loading"
    />
    <!-- 分页器 -->
    <el-pagination
      layout="slot,prev, pager, next"
      :total="pag.total"
      :current-page="pag.pageNo"
      :page-size="pag.pageSize"
      @current-change="handleCurrentChange"
    >
      <template slot="default">
        <div>
          <span>总共{{ this.pag.total }}条</span>
        </div>
      </template>
    </el-pagination>
  </div>
</template>

<script>
import searchView from "./searchView.vue";
import temlist from "./temlist.vue";
export default {
  components: {
    searchView,
    temlist,
  },
  data() {
    return {
      datas: [],
      loading: false,
      pag: {
        total: 0,
        pageNo: 1,
        pageSize: 5,
      },
      search: {},
    };
  },
  created() {
    this.getlist({ pageNo: this.pag.pageNo, pageSize: this.pag.pageSize });
  },
  methods: {
    searches(e) {
      this.search = e;
      this.pag.pageNo = 1;
      let obj = {
        pageNo: this.pag.pageNo,
        pageSize: this.pag.pageSize,
      };
      obj = Object.assign(obj, e);
      console.log(obj, "obj");
      this.getlist(obj);
    },
    //获取
    getlist(e) {
      this.loading = true;
      this.$http.get("/userlist", { params: e }).then((res) => {
        if (res.code == 200) {
          this.datas = res.data.data;
          this.pag.total = res.data.total;
          setTimeout(() => {
            this.loading = false;
          }, 1000);
        }
      });
    },
    //分页变化
    handleCurrentChange(e) {
      this.pag.pageNo = e;
      let obj = {
        pageNo: e,
        pageSize: this.pag.pageSize,
      };
      obj = Object.assign(obj, this.search);
      this.getlist(obj);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>